<template>
    <div>
        <div class="header">
            <div class="header-nav">
                <span class="title">鄂尔多斯块体北源速度模型可视化系统</span>
            </div>
            <!-- <div class="header-middle">
                <el-tree class="tree-container" :data="treeData" node-key="id"  :props="defaultProps"
                    @node-click="handleNodeClick" />
            </div> -->
            <div class="header-right">
                <div class="timer">
                    <span>{{ currentTime }}</span>
                    <span>{{ currentDate }}</span>
                </div>
                <div class="su"></div>
                <!-- <div class="exit" v-show="showUserManage"><a href="/userManage.html" target="_blank">用户管理</a></div> -->
                <div class="exit" v-show="showUserManage" @click="showUserManageFun">用户管理</div>
                <div class="su" v-show="showUserManage"></div>
                <div class="exit"><router-link to='/login'>退出</router-link></div>
            </div>
        </div>

        <el-dialog title="图片展示" :visible.sync="visible" width="1400px" @close="handleClose">
            <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
            <!-- <img :src="url" alt="图片加载失败" width="800px"> -->
        </el-dialog>
    </div>
</template>

<script>

function formatDate() {
  const now = new Date(); // 获取当前日期和时间

  // 提取年、月、日、小时
  const year = now.getFullYear(); // 年份
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份（从0开始，需要加1）
  const day = String(now.getDate()).padStart(2, '0'); // 日
  const hour = String(now.getHours()).padStart(2, '0'); // 小时（24小时制）

  // 拼接成指定格式
  const formattedDate = `${year}${month}${day}${hour}`;

  return formattedDate;
}

import {
    regionData,
} from "element-china-area-data";

export default {
    name: 'layers',
    components: {
    },
    props: {
        map: {
            type: Object,
            default: () => { }
        }
    },
    created() {
        this.startClock();
    },
    computed: {
        showUserManage() {
            return this.$store.state.user?.role === 'ADMIN' 
        },
    },
    data() {
        return {
            visible: false,
            treeData: [
                {
                    label: '全球天气图层',
                    children: [{
                        label: '全球卫星云图',
                    }, {
                        label: '风云卫星云图',
                    }, {
                        label: '葵花卫星云图',
                    }]
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            urls: null,
            url: '',

            regionData,
            selectedOptions: ['11', '1101', '110105'],

            navItems: [
                'Project Information', 'Device Config', 'Alarm Query', 'System Management'
            ],
            activeIndex: -1,
            showPanel: false, // 没有用到
            currentTime: '',
            currentDate: '',

            deviceConfigFrom: { // 设备配置

            },
        }
    },
    mounted() {
    },
    methods: {
        startClock() {
            setInterval(() => {
                this.currentTime = new Date().toLocaleTimeString()
                this.currentDate = new Date().toLocaleDateString()
            }, 1000)
        },
        clickNavItem(index) {
            this.activeIndex = index;
            if (index === 0) {
                this.$refs.projectInfoDialog.showDialog();
            } else if (index === 1) {
                this.$refs.deviceConfigDialog.showDialog();
            } else if (index === 2) {
                this.$refs.alertQueryDialog.showDialog();
            } else if (index === 3) {
                this.$refs.systemManagementDialog.showDialog();
            }
        },
        handleNodeClick(data) {
            this.selectedNode = data;
            let f = ''
            if (data.label === '全球天气图层') {
                console.log('全球天气图层');
            } else if (data.label === '全球卫星云图') {
                f = 'gmgsi'
            }
            else if (data.label === '风云卫星云图') {
                f = 'fy'
            } else if (data.label === '葵花卫星云图') {
                f = 'himawari9'
            }

            this.axios.get(`https://tiles.geovisearth.com/meteorology/v1/view/satellite/sev/${f}/vis/range?start=${'2025010100'}&end=${formatDate()}`,
                {
                    params: {
                        // location: this.$store.state.quxianCode,
                        token: '0f6a2507659fef660c63f88bb875abfd6a2314ef02aa8cc00e02d768af65dad7'
                    },
                })
                .then(res => {
                    if (res.status === 200) {
                        let urls = res.data.result.urls
                        this.urls = Object.values(urls).map(item => item[0])
                        if (this.urls.length > 0) {
                            this.url = urls[Object.keys(urls)[0]][0]
                            this.showList()
                        } else {
                            this.$message.warning('暂无数据')
                        }
                        // this.addStaticImage()
                    } else {
                        this.url = ''
                        // this.removeStaticImage()
                        this.$message.error(res.data.message)
                    }
                })
        },
        showList() {
            this.visible = true;
        },
        handleClose() {
            this.visible = false;
        },
        showLeida() {
            this.axios.get(`https://tiles.geovisearth.com/meteorology/v1/view/nowcast/mfv/precipint/curr`,
                {
                    params: {
                        token: '0f6a2507659fef660c63f88bb875abfd6a2314ef02aa8cc00e02d768af65dad7'
                    },
                })
                .then(res => {
                    if (res.status === 200) {
                        let urls = res.data.result.urls
                        let urlsArr = Object.keys(urls)
                        if (urlsArr.length > 0) {
                            let url = urls[urlsArr[0]][0]
                            console.log(url)
                            this.$emit('showLeida', url)
                        } else {
                            this.$message.warning('暂无数据')
                        }
                        // this.addStaticImage()
                    } else {
                        this.url = ''
                        // this.removeStaticImage()
                        this.$message.error(res.data.message)
                    }
                })
        },
        showUserManageFun() {  
            this.$alert('<iframe src="./userManage.html" frameborder="0" width="100%" height="100%"></iframe>', '用户管理', {
                customClass: 'message-logout',
                showCancelButton: false,
                showConfirmButton: false,
                dangerouslyUseHTMLString: true,
            })

            setTimeout(() => {
                    document.getElementsByClassName('message-logout')[0].style.width = '1200px';
                    document.getElementsByClassName('message-logout')[0].style.height = '800px';
                    document.getElementsByClassName('message-logout')[0].getElementsByTagName('p')[0].style.height = '700px';
            }, 50)
        }
    }
}
</script>

<style scoped>
.header {
    z-index: 1000;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 80px;
    background: url('./images/header/headBg.png') no-repeat, linear-gradient(180deg, #0a1920, #224a5380);
    ;
    /* background-image: url('./images/header/header.png'); */
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .header-nav {
        /* width: 810px;
        height: 183px;
        line-height: 77px; */
        /* margin-left: 40%; */
        background-image: url('./images/header/headTitle.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;

        .title {
            font-size: 36px;
            font-weight: bold;
            font-style: italic;
            color: #fff;
            /* margin-left: 40px; */
            line-height: 80px;
        }
    }

    .header-nav-item {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        position: relative;

        .left-icon {
            position: absolute;
            top: calc(50% - 7.25px);
            left: -30px;
        }

        .right-icon {
            position: absolute;
            top: calc(50% - 7.25px);
            right: -30px;
        }
    }

    .header-nav-item:hover {
        color: #27FFFF;
    }

    .active {
        color: #27FFFF;
    }

    .header-middle {
        position: absolute;
        top: 20px;
        left: 830px;
        display: flex;
        width: 500px;
        justify-content: space-around;
    }

    .header-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 77px;
        padding: 0 20px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .tree-container{
        width: 200px;
    }

    .timer {
        display: flex;
        align-items: flex-end;
        font-size: 20px;
        color: #fff;
        margin-right: 20px;
        display: flex;
        flex-direction: column;

        span:first-child {
            font-size: 20px;
            /* font-weight: bold; */
            font-style: italic;
        }

        span:last-child {
            font-size: 11px;
        }
    }

    .su {
        width: 5px;
        height: 36px;
        background-image: url('./images/header/su.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 20px;
    }

    .exit {
        display: flex;
        align-items: center;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
        margin-right: 20px;
    }

    .exit a {
        text-decoration: none;
        color: #fff;
    }
}
</style>